<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>餐桌列表</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/x-layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/url.js"></script>
</head>
<body>
<div style="margin-top: 20px">
    <div class="layui-input-block layui-form" lay-filter="table" style="width:190px;float: left">
        <select id="selected" name="search">
            <option value="">请选择</option>
            <option value="空闲">空闲</option>
            <option value="待结">待结</option>
        </select>
    </div>
    <div>
        <a class='layui-btn layui-btn-warm layui-btn-radius' style='margin-left: 20px' onclick="search1()"><i
                class="layui-icon layui-icon-search"></i></a>
    </div>
</div>
<div>
    <table id="DingTable" lay-filter="DingTable" style="width: 50px;height: auto"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use('table', function () {
        var totalCount;
        var table = layui.table;
        var $ = layui.$;
        //监听工具条
        window.search1 = function () {
            layui.table.reload('DingTable', {
                where: {
                    search: document.getElementById("selected").value
                },
                page: {
                    curr: 1
                }
            });
        }
        table.on('tool(DingTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.post("../deleteTableByTableId.do", {"tableId": data.tableId}, function (data) {
                        if (data.success) {
                            layer.msg(data.message, {icon: 1, time: 2000, offset: '100px'})
                            layer.close(index);
                            var limit = $(".layui-laypage-limits").find("option:selected").val();
                            totalCount = totalCount - 1;
                            if (totalCount % limit === 0) {
                                var yema = totalCount / limit;
                                layui.table.reload('DingTable', {page: {curr: yema}});
                            } else {
                                layui.table.reload('DingTable');
                            }
                        } else {
                            layer.msg(data.message, {icon: 2, time: 2000, anim: 6, offset: '100px'})
                            layer.close(index);
                            layui.table.reload('DingTable');
                        }
                    }, "json");
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                x_admin_show("餐桌编辑", "table-edit.html?tableId=" + data.tableId, 500, 350);
            }
        });
        table.render({
            elem: '#DingTable'
            ,
            height: 350
            ,
            url: '../findAllTable.do' //数据接口
            ,
            page: true //开启分页
            ,
            where: {
                search: document.getElementById("selected").value
            }
            ,
            cellMinWidth: 80
            ,
            limit: 5
            ,
            limits: [5, 10, 15, 20]
            ,
            title: '餐桌管理'
            ,
            width: '800'
            ,
            toolbar: "<div><a class='layui-btn layui-btn-sm' onclick='x_admin_show(\"餐桌添加\",\"table-add.html\",500,250);'>添加</a></div>"
            ,
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '分类管理' //标题
                , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-tips' //图标类名
            }]
            ,
            cols: [[ //表头
                {field: 'tableId', title: '桌号', fixed: 'left'}
                , {
                    field: 'tableState', title: '状态', templet: function (d) {
                        if (d.tableState == '待结') {
                            return '<div><span class="layui-badge">' + d.tableState + '</span></div>'
                        } else {
                            return '<div><span class="layui-badge layui-bg-green">' + d.tableState + '</span></div>'
                        }
                    }
                }
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
            ]]
            ,
            done: function (res, curr, count) {
                totalCount = count;
            }

        });
    });
</script>
<script src="../js/mouse.js"></script>
</body>
</html>